<template>
  <div class="publich">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="投稿内容">
        <el-input
          type="textarea"
          autosize
          placeholder="请输入投稿内容"
          v-model="content">
        </el-input>
      </el-form-item>
      <el-form-item label="投稿领域">
        <el-cascader
          placeholder="请选择"
          :options="form.options"
          ref="cascader"
          @change="change"
          v-model="areatype"
          filterable>
        </el-cascader>
      </el-form-item>
      <el-form-item label="专家人选">
        <el-select v-model="value" placeholder="请选择" @change="changeman">
          <el-option
            v-for="item in form.option"
            :key="item.value"
            :label="item.label"
            :value="item">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="匿名">
        <el-switch v-model="form.anonymous"></el-switch>
      </el-form-item>
      <el-form-item label="公开">
        <el-switch v-model="form.is_public"></el-switch>
      </el-form-item>
      <el-form-item v-if="items===undefined">
        <el-button type="primary" @click="onSubmit" :disabled="iscontent">立即投稿</el-button>
        <el-button @click="onbiji" :disabled="iscontent">存草稿箱</el-button>
      </el-form-item>
      <el-form-item v-else>
        <el-button @click="deleteItem">删除</el-button>
        <el-button type="primary" @click="updateitem">修改</el-button>
        <el-button type="primary" @click="updateSubmit">投稿</el-button>

      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  export default {
    name: "Publich",
    props: {
      contents: String,
      items: Object,
      open: Function,
      xiugai: Function
    },
    data () {
      return {
        areatype: [],
        type: [],
        form: {
          anonymous: false,
          is_public: false,
          options: [
            {
              label: '校园事',
              value: 0,
              children: []
            },
            {
              label: '青春期',
              value: 1,
              children: []
            },
            {
              label: '云雨时',
              value: 2,
              children: []
            },
            {
              label: '父母答',
              value: 3,
              children: []
            }
          ],
          option: [],
        },
        content: this.contents,
        istype: {},
        isman: {},
        man: [],
        value: '',
        manuscript: {
          uid: this.$store.state.user.uid,
          content: '',
          area_id: 0,
          anonymous: 0,
          is_public: 0,
          sid: 0,
          state: 1
        },
        iscontent: true
      }
    },
    mounted() {
      this.$http({
        method: 'post',
        url: '/area/allTypes'
      }).then(res => {
        res.data.forEach(label =>{
          label.label = label.area
          label.value = label.areaId
        })
        this.type = res.data
        this.form.options[0].children = this.type.slice(0,5)
        this.form.options[1].children = this.type.slice(5,10)
        this.form.options[2].children = this.type.slice(10,15)
        this.form.options[3].children = this.type.slice(15,20)
      }).catch(err => {
        console.log(err);
      })
      console.log(this.items);
      if (this.items!==undefined){
        this.form.anonymous = this.items.anonymous
        this.form.is_public = this.items.isPublic
        // this.areatype[0] = this.items.areaId/5
        // this.areatype[1] = this.items.areaId+1
      }
    },
    watch: {
      istype(val){
        let areaId = val.areaId
        console.log(areaId);
        this.$http({
          method: 'post',
          url: '/specialist/findSpecialist/'+areaId
        }).then(res => {
          console.log(res.data);
          res.data.forEach(man =>{
            man.label = man.specialistName
            man.value = man.sid
          })
          this.man = res.data
          this.form.option = this.man
        }).catch(err => {
          console.log(err);
        })
      },
      content(val){
        if (val!==''){
          this.iscontent = false
        }else {
          this.iscontent = true
        }
      }
    },
    methods: {
      //投稿
      onSubmit() {
        this.manuscript.content = this.content
        this.manuscript.area_id = this.istype.areaId
        this.manuscript.sid = this.isman.sid
        if (this.form.is_public){
          this.manuscript.is_public = 1
        }
        if (this.form.anonymous){
          this.manuscript.anonymous = 1
        }
        this.$http({
          method: 'post',
          url: '/manuscript/add',
          data: this.manuscript
        }).then(res => {
          this.$message({
            message: '投稿成功，请耐心等候',
            type: 'success'
          })
          this.$router.replace('/home')
        }).catch(err => {
          console.log(err);
        })
      },
      //存笔记
      onbiji() {
        this.manuscript.content = this.content
        this.manuscript.area_id = this.istype.areaId
        this.manuscript.sid = this.isman.sid
        this.manuscript.state = 0
        if (this.form.is_public){
          this.manuscript.is_public = 1
        }
        if (this.form.anonymous){
          this.manuscript.anonymous = 1
        }
        this.$http({
          method: 'post',
          url: '/manuscript/add',
          data: this.manuscript
        }).then(res => {
          this.$message({
            message: '可在笔记查看',
            type: 'success'
          })
          this.$router.replace('/home')
        }).catch(err => {
          console.log(err);
        })
      },
      //监听领域的变化
      change(val) {
        this.istype = this.$refs['cascader'].getCheckedNodes()[0].data
        this.value = ''
      },
      //专家的变化
      changeman(val) {
        this.isman = val
        console.log(val);
      },
      //点击删除
      deleteItem() {
        this.open(this.items.id)
      },
      //点击修改
      updateitem() {
        this.manuscript.content = this.content
        this.manuscript.area_id = this.istype.areaId
        this.manuscript.sid = this.isman.sid
        this.manuscript.state = 0
        if (this.form.is_public){
          this.manuscript.is_public = 1
        }
        if (this.form.anonymous){
          this.manuscript.anonymous = 1
        }
        this.manuscript.id = this.items.id
        this.manuscript.state = 0
        this.xiugai(this.manuscript)
      },
      //点击修改投稿
      updateSubmit() {
        this.manuscript.content = this.content
        this.manuscript.area_id = this.istype.areaId
        this.manuscript.sid = this.isman.sid
        this.manuscript.state = 1
        if (this.form.is_public){
          this.manuscript.is_public = 1
        }
        if (this.form.anonymous){
          this.manuscript.anonymous = 1
        }
        this.manuscript.id = this.items.id
        this.manuscript.state = 1
        this.xiugai(this.manuscript);
      }
    }
  }
</script>

<style scoped>
  .publich{
    margin: 50px auto;
    width: 600px;
    background-color: #ffffff;
    -webkit-box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
  }
  /deep/ .el-form {
    margin: 30px;
    padding: 30px;
  }
  /deep/ .el-textarea__inner{
    height: 35px!important;
  }
</style>
